<template>
	<div class="base-table-test">
		<!-- 表格 -->
		<el-table
			class="table-test"
			ref="table"
			:data="list"
			style="width: 100%; overflow: auto"
			:stripe="stripe"
			:border="border"
			:highlight-current-row="highlightCurrentRow"
			:size="size"
			v-loading="loading"
			:height="tableH"
			@selection-change="selectUpdate"
		>
			<template v-for="item in columns">
				<!-- 多选 -->
				<el-table-column
					v-if="item.type === 'checkBox'"
					:key="item.type"
					type="selection"
					:fixed="item.fixed"
					align="center"
					width="55"
				>
				</el-table-column>

				<!-- 序号 -->
				<el-table-column
					type="index"
					v-if="item.type === 'index'"
					:key="item.type"
					:label="item.label || '序号'"
					:fixed="item.fixed"
					align="center"
					width="50"
				>
				</el-table-column>

				<!-- 常态表格 -->
				<el-table-column
					v-if="item.type === 'pt'"
					:key="item.prop"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth"
					:fixed="item.fixed"
					:align="item.align || 'center'"
				>
				</el-table-column>

				<!-- 常态表格（展示字段需转换） -->
				<el-table-column
					v-if="item.type === 'propCode'"
					:key="item.prop"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth"
					:fixed="item.fixed"
					:align="item.align || 'center'"
				>
					<template slot-scope="scope">
						<span v-for="code in item.codeName" :key="code.auth">
							<span v-if="code.auth === scope.row.sex">{{ code.label }}</span>
						</span>
					</template>
				</el-table-column>

				<!-- link -->
				<el-table-column
					v-if="item.type === 'link'"
					:key="item.prop"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth"
					:fixed="item.fixed"
					:align="item.align || 'center'"
				>
					<template slot-scope="scope">
						<el-button
							id="link"
							@click="handleClickLink(scope.row)"
							type="text"
							size="small"
							>{{ scope.row[item.prop] }}</el-button
						>
					</template>
				</el-table-column>

				<!-- 分级表头 -->
				<el-table-column
					v-if="item.type === 'level'"
					:key="item.prop"
					:prop="item.prop"
					:label="item.label"
					:fixed="item.fixed"
					:align="item.align || 'center'"
					:width="item.width"
					:min-width="item.minWidth"
				>
					<template v-if="item.type === 'level' && item.children">
						<el-table-column
							v-for="so in item.children"
							:key="so.prop"
							:prop="so.prop"
							:label="so.label"
							:fixed="so.fixed"
							:align="so.align || 'center'"
							:width="so.width"
							:min-width="so.minWidth"
						>
							<template v-if="so.type === 'level' && so.children">
								<el-table-column
									v-for="child in so.children"
									:key="child.prop"
									:prop="child.prop"
									:label="child.label"
									:fixed="child.fixed"
									:align="child.align || 'center'"
									:width="child.width"
									:min-width="child.minWidth"
								>
								</el-table-column>
							</template>
						</el-table-column>
					</template>
				</el-table-column>

				<!-- 操作项 -->
				<el-table-column
					v-if="item.type === 'operation'"
					:key="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth"
					:fixed="item.fixed"
					:align="item.align || 'center'"
				>
					<template slot-scope="scope">
						<el-button
							@click="handleClickOperation(scope.row)"
							type="text"
							size="small"
							v-for="opt in item.operation"
							:key="opt.auth"
							:disabled="opt.disabled"
							v-text="opt.authText"
						>
						</el-button>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<!-- 分页 -->
		<div class="page_box" :style="{ height: pageBoxHeight + 'px' }">
			<el-pagination
				@current-change="pageIndexChange"
				background
				layout="prev, pager, next"
				:total="total"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	/*
        1，分级表头目前支持三级表头
        2，支持序号，多选
        3，支持code转换字符展示
        4，支持分页

        column: [
            { type: 'checkBox' },
            { type: 'index' },
            { prop: 'name', label: '姓名', type: 'link' },
            { prop: 'age', label: '年龄' },
            { 
                type: 'propCode',
                prop: 'sex', 
                label: '性别',
                codeName: [
                    { auth: 0, label: '女' },
                    { auth: 1, label: '男' },
                    { auth: 3, label: '应该是男的吧' },
                ]
            },
            { 
                label: '操作项', 
                type: 'operation',
                operation: [
                    { auth: 'update', authText: '编辑' },
                    { auth: 'delete', authText: '删除' },
                    { auth: 'detail', authText: '查看' }
                ] 
            }
        ]
    **/

	name: 'Table',
	props: {
		columns: {
			type: Array,
			default: () => {
				return [];
			},
		}, // 表头信息（必传）
		list: {
			type: Array,
			default: () => {
				return [];
			},
		}, // 列表数据（必传）
		stripe: { type: Boolean, default: true }, // 是否显示斑马线
		border: { type: Boolean, default: true }, // 边框
		highlightCurrentRow: { type: Boolean, default: true }, // 是否高亮当前行
		size: { type: String, default: 'mini' }, // 表格size（medium / small / mini）
		pageBoxHeight: { type: Number, default: 60 }, // 分页高度
		loading: { type: Boolean, default: false }, // loading状态
		total: { type: Number, default: 0 }, // 总数
	},
	data() {
		return {
			tableH: null, // table高度
		};
	},
	methods: {
		// link点击
		handleClickLink(row) {
			this.$emit('handleClickLink', row);
			console.log('点击link');
		},

		// 点击操作项
		handleClickOperation(row) {
			console.log('点击操作项');
			this.$emit('operation', row);
		},

		// 分页发生修改
		pageIndexChange(page) {
			console.log(page, '当前页码');
			this.$emit('currentPage', page);
		},

		// 选取数据
		selectUpdate(arr) {
			this.$emit('selectUpdate', arr);
			console.log(arr, '选取数据');
		},
	},
	mounted() {
		this.tableH =
			document.querySelector('.ccb_table').clientHeight - this.pageBoxHeight;
	},
};
</script>

<style lang="scss" scoped>
.base-table-test {
	height: 100%;

	.page_box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;
	}
}
</style>
